import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Input,Button ,Modal,Row,Col,message,Select,Popconfirm,Divider,Pagination,DatePicker } from 'antd';
import styles from './index.less';
import UPpdateImg from '../../utils/update';
const Option = Select.Option;

const Pages = ({ emerg, dispatch, loading }) => {
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
        },
        {
            title: '应急物资名称',
            dataIndex: 'name',
        },
        {
            title: '型号',
            dataIndex: 'model',
        },
        {
            title: '物资类型',
            dataIndex: 'type',
            render:text => text && text =='1'?'单':"批",
        },
        {
            title: '单位/规格',
            dataIndex: 'unit',
            render:text => text && text =='1'?'个':text =='2'?"台":text =='3'?'副':text =='4'?'把':
                text =='5'?"卷":text =='6'?'套':text =='7'?"双":"条",
        },
        {
            title: '检查周期',
            dataIndex: 'check_time',
            render:text => text && text =='1'?'年':text =='2'?"月":text =='3'?"周":"日",
        },
        {
            title: '备注',
            dataIndex: 'remark',
        },
        {
            title: '操作',
            dataIndex: 'option',
            render:(text,record) =><a onClick={()=>{
                localStorage.setItem('id',record.id);
                dispatch({type:'app/goToPath',payload:'Emergencysupplies_list'});
            }}>查看</a>,
        },
    ];
    return(
        <div className={styles.container}>
            <PagesGET dispatch={dispatch} {...emerg} loading={loading.global}/>
            <Table
                columns={columns}
                loading={loading.global}
                rowKey={id => id.id}
                pagination={false}
                size="small"
                dataSource={emerg.getEmergData || null} />
            <Pagination current={emerg.pages} showTotal={total => `共计 ${total} 条`}
                style={{float: 'right', margin: 10}} size="small" total={emerg.total}
                onChange={pages => { !loading.global && dispatch({type:'emerg/save',payload:{pages:pages}});}}/>
        </div>
    );
};

class PagesGET extends React.Component {


    constructor (props) {
        super(props);
        this.state = {
            m_name: '',
            name :'',
            model:"",
            type:'',
            unit:'',
            check_time:'',
            remark:"",
            fileList:[],
            picture:[],
        };
    }

    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        this.props.dispatch({type:"emerg/getEmerg",payload:{
            m_name: '',
            pageNumber :1,
            pageSize :10,
        }});
    }

    render (){

        let { pages,record,view ,dispatch,loading} = this.props;
        return (
            <div className={styles.containerit}>
                <Input value={this.state.m_name } placeholder="名称" style={{margin:10,width:256}}
                    onChange={e=>this.setState({m_name:e.target.value})}/>
                <Button type='primary' onClick={()=>{
                    let {m_name} = this.state;
                    this.props.dispatch({type:"emerg/getEmerg",payload:{
                        m_name: m_name,
                        pageNumber :pages,
                        pageSize :10,
                    }});
                }
                }>查询</Button>
                <Button style={{margin:10}} onClick={()=>{
                    dispatch({type:"emerg/save",payload:{view:true,record:{}}});
                    this.setState({
                        m_name: '',
                        name :'',
                        model:"",
                        type:'',
                        unit:'',
                        check_time:'',
                        remark:"",
                        fileList:[],
                        picture:[],
                    });
                }}>新增物资信息</Button>

                <Modal
                    title={record.id?"修改物资信息":"添加物资信息"}
                    visible={view}
                    confirmLoading={loading}
                    onOk={()=>{
                        let {name,model,type,unit,check_time,remark,picture} =this.state;
                        if(name && type && check_time){
                            let pics =[];
                            picture && picture.map(item =>{
                                pics.push(item.response.data);
                            });
                            let body ={
                                name :name,
                                model:model,
                                type:type,
                                unit:unit,
                                check_time:check_time,
                                remark:remark,
                                pics:pics,
                            };
                            if(record.id){
                                body.id = record.id;
                                dispatch({type:"emerg/putEmerg",payload:body});
                            }else{
                                dispatch({type:"emerg/postEmerg",payload:body});
                            }

                        }else{
                            message.error('请填写完整！');
                        }
                    }}
                    onCancel={()=>{
                        dispatch({type:"emerg/save",payload:{view:false,record:{}}});
                    }}>
                    <Row>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>应急物资名称:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({name: e.target.value})}
                                value={this.state.name}
                                placeholder="应急物资名称"/>
                        </Col>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>物资类型:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.type || '请选择'} style={{ width: 300, marginBottom: 10, marginTop: -4 }}
                                onChange={value=>{
                                    this.setState({
                                        type:value,
                                    });
                                }}>
                                <Option value='1'>单</Option>
                                <Option value='2'>批</Option>
                            </Select>
                        </Col>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>检查周期:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.check_time || '请选择'} style={{ width: 300, marginBottom: 10, marginTop: -4 }}
                                onChange={value=>{
                                    this.setState({
                                        check_time:value,
                                    });
                                }}>
                                <Option value='1'>年</Option>
                                <Option value='2'>月</Option>
                                <Option value='3'>周</Option>
                                <Option value='4'>日</Option>
                            </Select>
                        </Col>
                        <Col span={6}><span>物资型号:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({model: e.target.value})}
                                value={this.state.model}
                                placeholder="物资型号"/>
                        </Col>

                        <Col span={6}><span>单位选择:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.unit || '请选择'} style={{ width: 300, marginBottom: 10, marginTop: -4 }}
                                onChange={value=>{
                                    this.setState({
                                        unit:value,
                                    });
                                }}>
                                <Option value='1'>个</Option>
                                <Option value='2'>台</Option>
                                <Option value='3'>副</Option>
                                <Option value='4'>把</Option>
                                <Option value='5'>卷</Option>
                                <Option value='6'>套</Option>
                                <Option value='7'>双</Option>
                                <Option value='8'>台</Option>
                            </Select>
                        </Col>

                        <Col span={6}><span>备注信息:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({remark: e.target.value})}
                                value={this.state.remark}
                                placeholder="备注信息"/>
                        </Col>
                        <Col span={6}><span>图片信息:</span></Col>
                        <Col span={14}>
                            <UPpdateImg name="3" fileList={this.state.fileList} getUrl={e=>{
                                this.setState({
                                    picture:e,
                                    fileList:e,
                                });
                            }}/>
                        </Col>
                    </Row>
                </Modal>
            </div>
        );
    }

    componentWillReceiveProps (nextProps) {
        if (nextProps.record.id !== this.props.record.id) {
            let {userName,aliasName,phone,emailAddr} = nextProps.record;
            this.setState({
                userName: userName,
                aliasName:aliasName,
                phoneADD:phone,
                emailAddr:emailAddr,
            });
        }
        if(nextProps.pages !== this.props.pages){
            let {m_name} = this.state;
            this.props.dispatch({type:"emerg/getEmerg",payload:{
                m_name: m_name,
                pageNumber :nextProps.pages ==0?1:nextProps.pages,
                pageSize :10,
            }});
        }
    }
}


Pages.propTypes = {
    emerg: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ emerg, loading }) => ({ emerg, loading }))(Pages);
